<template>
  <h1>demo1</h1>
  <div>方法一：数量：{{count}}，名字：{{name}}</div>
  <div>方法二：{{state.count}}</div>
  <a-button @click="addButton">Add</a-button><br />
  <div style="margin: 20px 0;">
    <demo-child-vue :name="name" @updateName="updateName"></demo-child-vue>
  </div>
  <div style="margin: 20px 0;">
    <DemoChild2 v-model="student.name"  v-model:age="student.age" ref="childRef"></DemoChild2>
  </div>
  <a-button @click="childNums++">add</a-button>
  <div v-for="(item, i) in childNums" :key="item">
    <DemoChild3 :ref="(el) => addchildRefs[i] = el"></DemoChild3>
  </div>
  <a-button @click="childNums--">reduce</a-button>

  <hr />
  <h1>插槽slot</h1>
  <DemoChild4>
    <!-- 匿名插槽 -->
    <span>我是默认插槽</span>
    <!-- 具名插槽 -->
    <template #title>
      <h3>我是具名插槽</h3>
      <h3>我是具名插槽</h3>
      <h3>我是具名插槽</h3>
    </template>
    <!-- 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </DemoChild4>

  <hr />
  <h1>v-bind() CSS变量注入</h1>
  <DemoChild5></DemoChild5>
</template>

<script lang="ts" setup>
import { watch, reactive, toRefs, ref, computed, nextTick, getCurrentInstance } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import demoChildVue from '@/components/demoChild.vue'
import DemoChild2 from '@/components/demoChild2.vue'
import DemoChild3 from '@/components/demoChild3.vue'
import DemoChild4 from '@/components/demoChild4.vue'
import DemoChild5 from '@/components/demoChild5.vue'

/**
 *  watch方法
*/
const state = reactive({
  count: 1,
  name: 'Jerry'
})
const addButton = () => {
  state.count = state.count * 2
}
const { count, name } = toRefs(state)
watch(() => state.count, (newVal, oldVal) => {
  console.log(state.count)
  console.log(`watch监听变化前的数据：${oldVal}`)
  console.log(`watch监听变化后的数据：${newVal}`)
})

/**
 *  computed方法
*/
const num = ref(1)
// 通过computed获得doubleNum
const doubleNum = computed(() => {
  return num.value * 2
})
// 获取
console.log(`doubleNum获取num变化：${doubleNum.value}`)

/**
 *  子组件传父组件
 */
const updateName = (name:string) => {
  state.name = name
}

/**
 * 第二个组件
 */
const student = reactive({
  name: 'xiaoming',
  age: 12
})
// 子组件ref（TypeScript语法）
const childRef = ref<InstanceType<typeof DemoChild2>>()
nextTick(() => {
  // 获取子组件name
  console.log(childRef.value.nickName)
  // 执行子组件方法
  childRef.value.changeRefName()
})

/**
 * demo3
 */
// 子组件实例数组
const addchildRefs = ref([])
// 通过 addChildRef 方法向 childRefs 添加子组件实例
const addChildRef = (el:any) => {
  addchildRefs.value.push(el)
}
// 子组件数量
const childNums = ref(3)

/**
 * 路由useRoute和useRouter
 */
// 必须先声明调用
const route = useRoute()
const router = useRouter()
// 路由信息
console.log(route.query)
// 路由跳转
setTimeout(() => {
  // router.push('/newApi')
}, 3000)

/**
 * 路由导航守卫
 */
// 添加一个导航守卫，在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
  console.log('onBeforeRouteLeave')
  next()
})

// 添加一个导航守卫，在当前组件更新时触发。
// 在当前路由改变，但是该组件被复用时调用。
onBeforeRouteUpdate((to, from, next) => {
  console.log('onBeforeRouteUpdate')
  next()
})

/**
 * 原型绑定与组件内使用
 */
const { proxy } = getCurrentInstance()
console.log(`原型绑定输出：${proxy.author}`)

/**
 * css 注入
 */

</script>

<style>
</style>
